import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { getDynamicFonts } from '@/utils/fontUtils';
import useIsMobile from '@/hooks/isMoboile';

interface RegistrationSuccessModalProps {
  show: boolean;
  onClose: () => void;
}

const RegistrationSuccessModal: React.FC<RegistrationSuccessModalProps> = ({ show, onClose }) => {
  const { t, i18n } = useTranslation();
  const dynamicFonts = getDynamicFonts(i18n);
  const isMobile = useIsMobile();
  const [isVisible, setIsVisible] = useState(false);

  // Set visibility based on show prop
  useEffect(() => {
    setIsVisible(show);
  }, [show]);

  // Auto close after 3 seconds
  useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => {
        setIsVisible(false);
        setTimeout(() => {
          onClose();
        }, 300); // Allow animation to complete before calling onClose
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, [isVisible, onClose]);

  // Handle manual close
  const handleClose = () => {
    setIsVisible(false);
    setTimeout(() => {
      onClose();
    }, 300);
  };

  if (!show) return null;

  return ReactDOM.createPortal(
    <AnimatePresence>
      {isVisible && (
        <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ zIndex: 9600 }}>
          {/* Semi-transparent backdrop */}
          <motion.div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={handleClose}
          />

          {/* Modal */}
          <motion.div
            className={`relative ${isMobile ? 'w-[85%]' : 'max-w-md w-full'} bg-gradient-to-br from-[#252525] to-[#1A1A1A] p-6 rounded-2xl shadow-xl`}
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 10 }}
            transition={{ type: 'spring', stiffness: 300, damping: 25 }}
          >
            {/* Close button */}
            <button 
              className="absolute top-3 right-3 text-white/70 hover:text-white transition-colors"
              onClick={handleClose}
            >
              <i className="fas fa-times text-lg" />
            </button>

            {/* Content */}
            <div className="flex flex-col items-center text-center space-y-4">
              {/* Gem icon with animation */}
              <motion.div
                className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full flex items-center justify-center mb-2"
                initial={{ rotate: 0 }}
                animate={{ rotate: 360 }}
                transition={{ duration: 2, ease: "easeInOut" }}
              >
                <i className="fas fa-gem text-white text-2xl" />
              </motion.div>

              {/* Message */}
              <div className="space-y-2">
                <h3 
                  className="text-xl font-bold text-white"
                  style={{ fontFamily: dynamicFonts.font4 }}
                >
                  {t('registrationSuccess.title')}
                </h3>
                <p 
                  className="text-lg text-white"
                  style={{ fontFamily: dynamicFonts.font2 }}
                >
                  {t('registrationSuccess.gemMessage')}
                </p>
                <p 
                  className="text-base text-white/80 mt-1"
                  style={{ fontFamily: dynamicFonts.font1 }}
                >
                  {t('registrationSuccess.startMessage')}
                </p>
              </div>

              {/* Progress bar for auto-close indication */}
              <div className="w-full h-1 bg-gray-700 rounded-full overflow-hidden mt-4">
                <motion.div
                  className="h-full bg-gradient-to-r from-pink-500 to-purple-500"
                  initial={{ width: 0 }}
                  animate={{ width: "100%" }}
                  transition={{ duration: 3, ease: "linear" }}
                />
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>,
    document.body
  );
};

export default RegistrationSuccessModal; 